<template>
  <div class="pb-4 bg-gray-50">
    <div class="flex justify-between min-w-full mb-8">
      <el-carousel
        ref="headBanner"
        indicator-position="outside"
        :class="['w-full']"
        :autoplay="true"
        height="38rem"
        style="position: relative"
        @change="bannerImgChange"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.picture"
            ></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="min-1200 py-8">
      <div
        class="flex justify-between mb-4"
        style="height: 500px; overflow: hidden"
      >
        <div class="w-4/6">
          <div class="border-t broder-blue-400 h-14 flex w-full relative pb-4">
            <div
              v-for="item in headList"
              :key="item.id"
              :class="['notice-head cursor-pointer ', activeHeadClass(item.id)]"
              @click="noticeHeadSelect(item.id)"
            >
              {{ item.name }}
            </div>

            <div class="h-full absolute right-0 top-0 z-10">
              <router-link :to="{ path: '/newsModal' }">
                <span
                  class="
                    h-14
                    leading-10
                    flex
                    content-center
                    text-blue-500
                    cursor-pointer
                    alink
                  "
                  >更多</span
                >
              </router-link>
            </div>
          </div>

          <div v-show="!activeHeadIndex">
            <div
              v-for="item in noticeList"
              :key="item.annunciatePolicyId"
              class="
                flex
                justify-between
                px-3
                py-6
                border-b border-dashed
                cursor-pointer
                alink
              "
              @click="toNoticeDetail(item.annunciatePolicyId)"
            >
              <p class="flex-grow-2 max-w-3xl h-6 truncate">{{ item.title }}</p>
              <span
                class="
                  not-italic
                  text-gray-400
                  flex-grow-1
                  min-w-8rem
                  text-right
                "
                >{{ item.publishTime }}</span
              >
            </div>
          </div>
          <div v-show="activeHeadIndex">
            <div
              v-for="item in policyList"
              :key="item.annunciatePolicyId"
              class="
                flex
                justify-between
                px-3
                py-6
                border-b border-dashed
                cursor-pointer
                alink
              "
              @click="toPolicyDetail(item.annunciatePolicyId)"
            >
              <p class="flex-grow-2 max-w-3xl h-6 truncate">{{ item.title }}</p>
              <span
                class="
                  not-italic
                  text-gray-400
                  flex-grow-1
                  min-w-8rem
                  text-right
                "
                >{{ item.publishTime }}</span
              >
            </div>
          </div>
        </div>

        <div class="declare-container">
          <link-card>
            <router-link
              :to="{
                path: '/newsModal/newspolicyDetail',
                query: { id: 20 },
              }"
            >
              <div class="card-contain">
                <div class="card-box">
                  <p>瞪羚/独角兽企业</p>
                  <p>政策扶持举措</p>
                </div>
                <el-image
                  :src="require('@/assets/images/home/alink1.png')"
                  class="card-bg"
                  fit="cover"
                ></el-image>
              </div>
            </router-link>
          </link-card>

          <link-card class="mt-4">
            <router-link to="/exam/unicornEvaluation">
              <div class="card-contain">
                <div class="card-box">
                  <p class="text-center">独角兽企业测评</p>
                </div>
                <el-image
                  :src="require('@/assets/images/home/alink2.png')"
                  class="card-bg"
                  fit="cover"
                ></el-image>
              </div>
            </router-link>
          </link-card>

          <link-card class="mt-4">
            <router-link to="/exam/gazelleEvaluation">
              <div class="card-contain">
                <div class="card-box ml-4">
                  <p class="text-center">瞪羚企业测评</p>
                </div>
                <el-image
                  :src="require('@/assets/images/home/alink3.png')"
                  class="card-bg"
                  fit="cover"
                ></el-image>
              </div>
            </router-link>
          </link-card>

          <!-- <link-card>
            <div
              class="card-contain bg-gradient-to-b from-blue-600 to-purple-600"
            >
              <div class="card-box">
                <p class="text-sm">高新技术企业测评</p>
                <p class="text-xs">
                  让企业用户对自身的创新能力 有更清晰、直观的了解
                </p>
              </div>
              <el-image :src="require('@/assets/images/home/alink4.png')" class="card-bg" fit="cover" ></el-image>
            </div>
          </link-card> -->

          <!-- <div class="pb-4">
              <div class="card-head">
                <div class="outline" style="z-index: -1"></div>
                <div class="z-20 h-12">企业申报</div>
              </div>
            </div>
            <div>
              <div
                v-for="(item, index) in canDeclareList"
                :key="index"
                class="flex justify-between p-2 py-4 border-b border-dashed cursor-pointer hover:bg-gray-100 alink hover:bold"
                @click="toDeclareDetail(item)"
              >
                <h4 class="flex-grow-2 max-w-xs truncate h-4">{{ item.dictLabel }}</h4>
                <i type="primary" class="el-icon-d-arrow-right font-bold text-blue-600"></i>
              </div>
          </div>-->
        </div>
      </div>
    </div>

    <!-- <div class="py-4 overflow-hidden">
      <div class="w-full bg-blue-700 flex flex-col" style="height: 10rem">
        <div class="min-1200 text-white text-2xl font-bold">申报业务</div>
        <div class="min-1200 nav-list">
          <span :class="['item', switchTab == 0 ? 'active-item' : '']" @click="switchTab = 0">申报中</span>
          <span :class="['item', switchTab == 1 ? 'active-item' : '']" @click="switchTab = 1">所有</span>
        </div>
      </div>
      <div class="min-1200">
        <div :class="[activeTableShow(0) ? 'active-table-leftin pt-12' : '']">
          <table v-if="activeTableShow(0)" class="self-table-form rounded-md">
            <thead>
              <tr>
                <th class="label">计划类别</th>
                <th class="label">项目类别</th>
                <th class="label">申报起止时间</th>
                <th class="label">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in canDeclareList" :key="index">
                <td v-if="index == 0" :rowspan="canDeclareList.length" class="label">江西独角兽瞪羚申报</td>
                <td class="label">{{ item.dictLabel }}</td>
                <td class="label">
                  <div>
                    {{ item.startTime + "-" + item.endTime }}
                    <div
                      :class="[
                        'text-sm',
                        !declareTimeText(item.endTime) ? 'text-red-500' : '',
                      ]"
                    >{{ !declareTimeText(item.endTime) ? "已过期" : "" }}</div>
                  </div>
                  <div :class="['text-sm']"></div>
                </td>
                <td
                  :class="[
                    'font-bold text-center cursor-pointer',
                    declareStatusObj(item.endTime)['color'],
                  ]"
                  style="color: #3b82f6"
                >
                  <span @click="toDeclareDetail(item)">
                    {{
                    declareStatusObj(item.endTime)["text"]
                    }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div :class="[activeTableShow(1) ? 'active-table-rightin pt-12' : '']">
          <table v-if="activeTableShow(1)" class="self-table-form rounded-md">
            <thead>
              <tr>
                <th class="label">计划类别</th>
                <th class="label">项目类别</th>
                <th class="label">申报起止时间</th>
                <th class="label">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in declareTypeList" :key="index">
                <td v-if="index == 0" :rowspan="declareTypeList.length" class="label">江西独角兽瞪羚申报</td>
                <td class="label">{{ item.dictLabel }}</td>
                <td class="label">
                  <div>{{ item.startTime + "-" + item.endTime }}</div>
                  <div
                    :class="[
                      'text-sm',
                      !declareTimeText(item.endTime) ? 'text-red-500' : '',
                    ]"
                  >{{ !declareTimeText(item.endTime) ? "已过期" : "" }}</div>
                </td>
                <td
                  :class="[
                    'font-bold text-center cursor-pointer',
                    declareStatusObj(item.endTime)['color'],
                  ]"
                  style="color: #3b82f6"
                >
                  <span @click="toDeclareDetail(item)">
                    {{
                    declareStatusObj(item.endTime)["text"]
                    }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> -->

    <div class="map-container">
      <div class="w-1200-container map-box">
        <div class="mt-12">
          <h4 class="text-white">城市数据</h4>
          <div class="mt-12">
            <div class="mt-12 ml-2">
              <div class="flex items-center">
                <div class="map-location-icon py-2">
                  <i class="el-icon-location text-blue-700"></i>
                </div>

                <div class="ml-8 text-xl text-white">独角兽企业</div>
              </div>

              <div class="flex items-center py-2">
                <div class="map-location-icon">
                  <i class="el-icon-location text-purple-400"></i>
                </div>
                <div class="ml-8 text-xl text-white">瞪羚企业</div>
              </div>
            </div>
          </div>
        </div>

        <div class="map-l-b-box">
          <ul class="line-info-box">
            <li></li>
            <li v-for="item in companyList" :key="item.name">
              <div class="unit">
                {{ item.number }} <span class="text-sm"> 家 </span>
              </div>
              <div class="info-name">{{ item.enterType }}</div>
            </li>
          </ul>
        </div>

        <el-image class="map-bg" :src="mapbg" lazy></el-image>
      </div>
    </div>

    <div class="min-1200">
      <div class="py-4 pt-8">
        <h2 class="head-title text-3xl">明星企业</h2>
      </div>
    </div>
    <el-carousel
      ref="headBanner"
      :class="['w-full']"
      :autoplay="false"
      indicator-position="none"
      class="carousel-container"
    >
      <el-carousel-item
        v-for="(carouselItem, index) in splitImgList"
        :key="index"
      >
        <div class="img-list">
          <div v-for="(item, index) in carouselItem" :key="index" class="item">
            <el-image :src="item.picture"></el-image>
            <div class="inline-block text-sm py-2 text-left">
              {{ item.enterpriseName }}
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Verify from "@/components/Verifition/Verify";
import { getComType } from "@/api/info.js";

import Navbar from "@/layoutHome/components/Navbar/index";
import LinkCard from "@/views/components/LinkCard";
import { getBanner } from "@/api/banner";
import { getNoticeList } from "@/api/notice";
import { getPolicyList } from "@/api/policy";
import { getEnterpriseList } from "@/api/startEnterprise";

import { getToken } from "@/utils/auth";
import { getDeclareList } from "@/api/declareList";
import { addDeclare } from "@/api/declareList";

import { mapGetters, mapActions } from "vuex";

export default {
  components: { Verify, Navbar, LinkCard },
  name: "Login",
  computed: {
    ...mapGetters({
      token: "token",
      userName: "name",
    }),
    activeTableShow() {
      return (tabIndex) => {
        if (tabIndex == this.switchTab) {
          return true;
        } else {
          return false;
        }
      };
    },
    activeHeadClass() {
      return (itemId) => {
        if (this.activeHeadIndex == itemId) {
          return "active-notice-head";
        }
        return "";
      };
    },
    declareStatusObj() {
      return (endTime) => {
        let isCanDeclare = this.isOverNow(endTime);
        if (isCanDeclare) {
          return { text: "进行申报", color: "text-blue-500" };
        } else {
          return { text: "", color: "" };
        }
      };
    },
    declareTimeText() {
      return (endTime) => {
        return this.isOverNow(endTime);
      };
    },
    splitImgList() {
      let imgList = this.imgList;
      let spiltlength = Math.ceil(imgList.length / 15);
      let resArr = [];
      for (let index = 0; index < spiltlength; index++) {
        let startIndex = index * 15;
        resArr.push(imgList.slice(startIndex, startIndex + 15));
      }
      return resArr;
    },
  },

  data() {
    return {
      mapbg: require("@/assets/images/home/map.png"),
      activeIndex: 1,
      switchTab: 0,
      activeBannerIndex: 0,
      companyList: [],
      infoLine1: [
        {
          name: "瞪羚企业",
          num: 244,
        },
        {
          name: "独角兽企业",
          num: 3,
        },
        {
          name: "潜在独角兽",
          num: 9,
        },
        {
          name: "高新技术企业",
          num: 7662,
        },
      ],
      infoLine2: [
        {
          name: "高等院校",
          num: 113,
        },
        {
          name: "科研院所",
          num: 7,
        },
        {
          name: "创新平台",
          num: 1324,
        },
        {
          name: "创业载体",
          num: 233,
        },
        {
          name: "创投机构",
          num: 136,
        },
      ],
      bannerDictLabel: "首页",
      bannerDicts: [],
      bannerList: [
        {
          picture: '',
          redirectUrl: "",
          id: 3,
        },
      ],
      headList: [
        { id: 0, name: "通知公告" },
        { id: 1, name: "政策文件" },
      ],
      activeHeadIndex: 0,
      bussinessActiveIndex: "0",

      // 通知公告
      noticeList: [
        // {
        //   annunciatePolicyId: "",
        //   publishTime: "",
        //   title: ""
        // }
      ],
      // 政策列表
      policyList: [
        // {
        //   annunciatePolicyId: "",
        //   publishTime: "",
        //   title: ""
        // }
      ],

      // 明星企业
      imgList: [],
      declareTypeList: [
        {
          id: 0,
          dictLabel: "2021江西省瞪羚企业认定申报",
          dictValue: "0",
          startTime: "2020.12.31",
          endTime: "2022.12.31",
        },
        {
          id: 1,
          dictLabel: "2021江西省潜在瞪羚企业认定申报",
          dictValue: "1",
          startTime: "2020.12.31",
          endTime: "2022.12.31",
        },

        {
          id: 2,
          dictLabel: "2021江西省独角兽企业认定申报",
          dictValue: "2",
          startTime: "2020.12.31",
          endTime: "2022.12.31",
        },
        {
          id: 3,
          dictLabel: "2021江西省潜在独角兽企业认定申报",
          dictValue: "3",
          startTime: "2020.12.31",
          endTime: "2022.12.31",
        },
        {
          id: 4,

          dictLabel: "2021江西省种子独角兽企业认定申报",
          dictValue: "4",
          startTime: "2020.12.31",
          endTime: "2022.12.31",
        },
      ],

      // 申报列表
      declareList: [],

      classicDeclare: [
        {
          id: 0,
          name: "2021年度江西省瞪羚企业认定申报",
          startTime: "2020.11.20",
          endTime: "2022.10.19",
        },
      ],
      // 申报中的文件
      canDeclareList: [],
      allDeclare: [
        {
          id: 0,
          name: "2021年度江西省瞪羚企业认定申报",
          startTime: "2020.11.20",
          endTime: "2022.10.21",
        },
        {
          id: 1,
          name: "2021年度江西省瞪羚企业认定申报",
          startTime: "2020.11.20",
          endTime: "2022.10.22",
        },
        {
          id: 2,
          name: "2021年度江西省瞪羚企业认定申报",
          startTime: "2020.11.20",
          endTime: "2022.11.23",
        },
      ],
      declareStatus: [
        {
          id: 0,
          name: "已过期",
        },
        {
          id: 1,
          name: "待定",
        },
        {
          id: 2,
          name: "申报中",
        },
      ],
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        uuid: "",
        code: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },

  async created() {
    this.initDeclareList();
    await this.getBannerDicts();
    this.initBannerList();

    this.initCompanyType();
    this.inintStartList();
    this.initNoticeList();
    this.initPolicyList();

    window.isCloseHint = true;

    window.addEventListener("beforeunload", function (e) {
      if (window.isCloseHint) {
        var confirmationMessage = ("注意保存所填写信息"(
          e || window.event
        ).returnValue = confirmationMessage);
        return confirmationMessage;
      }
    });
  },

  methods: {
    ...mapActions({
      LogOut: "LogOut", // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称
      GetInfo: "GetInfo",
    }),
    // 获取企业信息
    // 只需要 serial 值为这些的 [1,2,4,5,8,9,10,11,12]
    async initCompanyType() {
      let tarArr = [1, 2, 4, 5, 8, 9, 10, 11, 12];
      let res = await getComType();
      if (res.code === 200) {
        let companyList = this.findArr(res.data, tarArr, "serial");
        // this.companyList = res.data
        this.companyList = companyList;
      }
    },
    /**
     * @description 从对象数组中 寻找相应的 值
     * @param {Array} sourceList  源数组
     * @param {Array} targetList  目标数组
     * @param {String} baseProp  根据 对象的 baseProp 属性值进行对比
     * @return {Array} 返回寻找到的对象数组（没有顺序，没找到不会插入到该数组）
     */
    findArr(sourceList, targetList, baseProp) {
      let tempSources = [...sourceList];
      let resArr = [];
      targetList.forEach((tarV) => {
        let findIndex = tempSources.findIndex(
          (item) => parseInt(item[baseProp]) === parseInt(tarV)
        );
        if (findIndex !== -1) {
          let findItemArr = tempSources.splice(findIndex, 1);
          resArr.push(findItemArr[0]);
        }
      });
      return resArr;
    },

    // 传入时间，检测时间是否超过今天
    isOverNow(time) {
      let endTime = JSON.parse(JSON.stringify(time));
      if (endTime) {
        let lineDateStr = endTime.replace(/\./g, "/");
        let date = new Date(lineDateStr);
        let nowTime = new Date();
        let nowTimeChuo = nowTime.valueOf();
        let endTimeChuo = date.valueOf();
        if (nowTimeChuo >= endTimeChuo) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },

    toDeclareDetail(item) {
      let id = item.id;
      if (getToken()) {
        let requestObj = {
          year: 2021,
          type: id,
          status: 0,
          declareTime: item.startTime + "-" + item.endTime,
        };
        addDeclare(requestObj).then((res) => {
          if (res.code == 200) {
            let relationId = res.data.keyId;
            this.$router.push({
              path: "/enterprise/form",
              query: { id: relationId, typeId: id, declareIndex: 0 },
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "您还未登录!",
        });
        this.LogOut();
        // this.token = false;
      }
    },
    setBannerImg(index) {
      this.$refs["headBanner"].setActiveItem(index);
      // this.activeBannerIndex = index
    },
    // 轮播图 handler change
    bannerImgChange(e) {
      this.activeBannerIndex = e;
    },

    // 获取轮播图字典列表
    async getBannerDicts() {
      let dictsRes = await this.getDicts("rotation_map");
      if (dictsRes.code === 200) {
        this.bannerDicts = dictsRes.data;
      }
    },

    // 根据字典名称 获取相应的 字典值
    /**
     * @param {Array} dicts 字典列表
     * @param {String} dictLabel 字典名称
     * @returns {String} 返回相应的字典值.若没有相应的值返回  ''  （空字符串）
     */
    getBannerValue(dicts, dictLabel) {
      let findItem = dicts.find((item) => item.dictLabel === dictLabel);
      return findItem && findItem.dictValue ? findItem.dictValue : "";
    },

    // 初始化轮播
    initBannerList() {
      let bannerValue = this.getBannerValue(
        this.bannerDicts,
        this.bannerDictLabel
      );
      getBanner({ type: parseInt(bannerValue) }).then((res) => {
        if (res.code == 200) {
          this.bannerList = res.rows;
        }
      });
    },

    // 初始化申报列表  所有的申报列表
    initDeclareList() {
      this.declareList = this.addDeclareDetail(this.declareTypeList);
    },

    addDeclareDetail(declareList) {
      let hasDetailList = [];
      declareList.forEach((item, index) => {
        hasDetailList[index] = {
          ...item,
          ...this.findDeclareRealItem(item.type),
        };
        this.addCanDeclareList(hasDetailList[index]);
      });
      return hasDetailList;
    },

    addCanDeclareList(item) {
      let isCanDeclare = this.isOverNow(item.endTime);
      if (isCanDeclare) {
        this.canDeclareList.push(item);
      }
    },

    findDeclareRealItem(type) {
      if (this.declareTypeList) {
        let resItem = {};

        this.declareTypeList.forEach((item) => {
          if (type == parseInt(item.dictValue)) {
            resItem = item;
          }
        });

        return resItem;
      } else {
        return "";
      }
    },

    // 初始化明星企业
    inintStartList() {
      let requestObj = {
        pageSize: 15,
        pageNum: 1,
      };
      getEnterpriseList().then((res) => {
        if (res.code == 200) {
          this.imgList = res.rows;
        }
      });
    },

    // 初始化 通知公告
    initNoticeList() {
      let requestObj = {
        pageSize: 6,
        pageNum: 1,
      };
      getNoticeList(requestObj).then((res) => {
        if (res.code == 200) {
          if (res.rows) {
            this.noticeList = res.rows.slice(0, 6);
          }
        }
      });
    },

    // 初始化 政策列表
    initPolicyList() {
      let requestObj = {
        pageSize: 6,
        pageNum: 1,
      };
      getPolicyList(requestObj).then((res) => {
        if (res.code == 200) {
          if (res.rows) {
            this.policyList = res.rows.slice(0, 6);
          }
        }
      });
    },

    noticeHeadSelect(index) {
      if (this.activeHeadIndex == index) {
        return;
      }
      this.activeHeadIndex = index;
    },
    handleBussSelect(key, path) {},

    toNoticeDetail(id) {
      this.$router.push({ name: "noticeDetail", query: { id: id } });
    },
    toPolicyDetail(id) {
      this.$router.push({ name: "newspolicyDetail", query: { id: id } });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.notice-head {
  @apply h-10 leading-10 w-40 text-center  px-4 bg-gray-50 text-black;
}
.active-notice-head {
  @apply text-white bg-blue-500;
}

.declare-container {
  @apply flex flex-col justify-start text-gray-500 mx-8;

  .card-contain {
    width: 280px;
    height: 106px;
    @apply rounded-sm;
    .card-box {
      @apply relative z-20 h-full w-9/12 flex flex-col justify-center pl-6 text-white leading-8;
    }

    .card-bg {
      @apply absolute z-10 left-0 top-0 w-full;
    }
  }
}
.self-table-form {
  min-height: 395px;
}
.self-table-form {
  th,
  td {
    padding: 1rem;
    color: #303539;
    border-color: #bfbfbf;
  }
  th {
    background-color: #efefef;
  }
}
.active-table-leftin {
  animation: transTable-leftin 600ms ease 100ms;
}
.active-table-rightin {
  animation: transTable-rightin 600ms ease 100ms;
}
@keyframes transTable-leftin {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes transTable-rightin {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.carousel-container {
  width: 1200px;
  margin: auto;
  min-height: 620px;
  .el-carousel__container {
    min-height: 620px;

    .el-carousel__item {
      padding: 20px 0;
    }
  }
}
.img-list {
  width: 1160px;
  margin: auto;
  min-height: 540px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
  @apply py-4 grid grid-cols-5 grid-rows-3 rounded-lg my-6;
  .item {
    @apply text-center px-3;
    .el-image {
      min-width: 188px;
      width: 188px;
      height: 93px;
      @apply p-2 rounded-sm cursor-pointer m-auto mx-4;
    }
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  // background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 20px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  background: #ffffff;
  width: 400px;
  padding: 0 0 5px 0;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 100%;
  float: right;
  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.el-carousel__container {
  .float-img-item {
    @apply p-2;
    .el-image {
      @apply w-40 h-20 rounded-md;
    }
  }
  .float-img-item-active {
    .el-image {
      @apply border-2 border-gray-200;
    }
  }
}
.el-carousel__arrow {
  transform: scale(1.5) !important;
}

// 地图样式
.map-container {
  height: 727px;
  background: linear-gradient(132deg, #4473ff 3%, #3836ff 98%);
  .map-box {
    @apply relative h-full;
    .map-bg {
      height: 600px;
      @apply absolute left-0 top-12;
    }

    .map-location-icon {
      @apply w-4 h-4 relative bg-white rounded-md;
      .el-icon-location {
        @apply absolute -left-2 -top-2 text-3xl;
      }
    }

    .map-l-b-box {
      width: 650px;
      @apply absolute right-12 bottom-2 text-gray-200;

      .line-info-box {
        @apply grid grid-cols-5 mb-8;
      }
      li {
        @apply mt-4;
      }
      .unit {
        @apply font-bold text-xl text-gray-100;
      }
      .info-name {
        @apply mt-2 text-lg;
      }
    }
  }
}

.min-1200 {
  min-width: 1200px;
  width: 1200px;
  margin: auto;
}
.nav-list {
  display: flex;
  margin: 0 auto;
  .item {
    color: #fff;
    height: 3rem;
    font-size: 1.2rem;
    line-height: 3rem;

    padding: 0 2rem;
    cursor: pointer;
  }
  .active-item {
    @apply bg-white text-blue-500;
  }
}
</style>
